<template>
  <div :class="className" id="main2" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';

require("echarts/theme/macarons"); // echarts theme


const animationDuration = 6000;

export default {

  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    chartData: {
      type: Object,
      required: true
    },
    str:{
      type: String,
      default: "%"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(()=>{
          this.initChart();
      },80)
      
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      var chartDom2 = document.getElementById('main2');
      this.chart = echarts.init(chartDom2);
      this.setOptions(this.chartData);

    },
    setOptions({ expectedData, date } = {}) {
      let _this=this
      this.chart.setOption({
        xAxis: {
          max: 'dataMax',
          axisLabel:{
            textStyle: {
              color: '#7C8CA5'
            }
          },
          axisLine: {
            show:false,
            textStyle: {
              color: '#7C8CA5'
            }
          },
        },
        grid: {
          top: 20,
          left: "2%",
          right: "12%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: {
          type: 'category',
          data: date,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4, // only the largest 3 bars will be displayed
          axisLabel:{
            textStyle: {
              color: '#7C8CA5',
            },
            interval: 0,
            formatter:function(value)
            {
              var ret = "";//拼接加\n返回的类目项
              var maxLength = 6;//每项显示文字个数
              var valLength = value.length;//X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1)//如果类目项的文字大于3,
              {
                for (var i = 0; i < rowN; i++) {
                  var temp = "";//每次截取的字符串
                  var start = i * maxLength;//开始截取的位置
                  var end = start + maxLength;//结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              }
              else {
                return value;
              }
            }
          },
          axisLine: {
            show:false,
            textStyle: {
              color: '#7C8CA5',
              textAlign:'left'
            }
          },
        },
        series: [{
          realtimeSort: true,
          name: this.str.indexOf('小时')>=0?'时间':'产量',
          type: 'bar',
          barWidth: "32%",
          data: expectedData,
          label: {
            show: true,
            position: 'right',
            valueAnimation: false,
            textStyle: { //数值样式
                color: '#2297F0'
              }
              // formatter: function(params){
              //       // console.log(params)
              //       return params.value+_this.str
              // }
            
          },
          itemStyle:{
            normal:{
              color:'#2297F0',
              barBorderRadius: [0, 20, 20, 0]
            }
          },
        }],
        legend: {
          show: false
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      });
    }
  }
};
</script>
